<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>表单</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../../static/plugins/layui/css/layui.css" th:href="@{plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" href="../../static/mycss/common.css" th:href="@{mycss/main.css}"/>

</head>
<body>
<div>
    <div style="padding:10px;">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="form_demo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">文本框</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="t1" placeholder=""/>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">选择框</label>
                    <div class="layui-input-inline">
                        <select name="s1" lay-verify="">
                            <option value="">---请选择---</option>
                            <option value="0">单位1</option>
                            <option value="1">单位2</option>
                            <option value="2">单位3</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">日期框</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input date" lay-verify="date" name="d1"
                               placeholder="yyyy-MM-dd"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">必填项</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" lay-verify="required" placeholder="必填项" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">多规则验证</label>
                    <div class="layui-input-inline">
                        <input type="text" name="number" lay-verify="required|number" placeholder="必填项、数字格式"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证身份证</label>
                    <div class="layui-input-inline">
                        <input type="text" name="identity" lay-verify="identity" placeholder="验证身份证" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证链接</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">自定义验证</label>
                <div class="layui-input-inline">
                    <input type="tel" name="url" lay-verify="myVerify" placeholder="自己定义验证方法" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文本框</label>
                <div class="layui-input-inline">
                    <input type="text" name="t2" required lay-verify="" placeholder="layui-input-inline"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"> 注：辅助文字,可以在这里填写一些说明信息</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文本框</label>
                <div class="layui-input-block">
                    <input type="text" name="t3" required lay-verify="" placeholder="layui-input-block"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择地区</label>
                <div class="layui-input-inline">
                    <select name="province" lay-filter="province">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" lay-filter="city">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="area" lay-filter="area">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux"> 注：暂时为实现。。。</div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">日期范围1</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="date_min" placeholder="￥" autocomplete="off" class="layui-input date">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input type="text" name="date_max" placeholder="￥" autocomplete="off" class="layui-input date">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">日期范围2</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input date_extent" placeholder="立案时间">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="写作" checked>
                    <input type="checkbox" name="like[read]" title="阅读">
                    <input type="checkbox" name="like[dai]" title="发呆">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="aa" lay-skin="switch" lay-text="ON|OFF" checked>
                    <input type="checkbox" name="bb" lay-skin="switch" lay-text="开启|关闭">
                    <input type="checkbox" name="zz" lay-skin="switch" lay-text="男|女">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">附件上传</label>
                <div class="layui-input-block">
                    <div class="file_upload" style="width: 80px;height: 80px;background-color: #93D1FF">
                        <i class="layui-icon" style="font-size: 80px; color: #1E9FFF;">&#xe654;</i>
                    </div>
                </div>
            </div>
        </form>

    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="../../static/plugins/layui/layui.js" th:src="@{plugins/layui/layui.js}"></script>
<script>
    layui.use(['form', 'laydate', 'layer', 'upload'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var upload = layui.upload;


        //自定义验证规则
        form.verify({
            myVerify: function(value) {
                if(value.length < 5) {
                    return '至少得5个字符';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            content: function(value) {
                layedit.sync(editIndex);
            }
        });


        //监听提交
        form.on('submit(form_demo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });

        //弹出附件上传框
        $('.file_upload').click(function () {
            layer.open({
                type: 2,
                title: '附件列表',
                content: 'toUpload',
                area: ['800px', '80%'],
                resize: false,//是否允许拉伸
                maxmin: false, //开启最大化最小化按钮
                shadeClose: false,
                shade: 0.6
            });
        });

        //日期框渲染，同时绑定多个输入框
        lay('.date').each(function () {
            laydate.render({
                elem: this,
                trigger: 'click',
                format: 'yyyy-MM-dd'
            });
        });
        //日期框渲染，（日期范围格式）
        laydate.render({
            elem: '.date_extent',
            range: true
        });

    });

</script>

</body>
</html>